<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
</head>
<body>
<div id="main" style="height:800px;"></div>
<script src="/js/echarts/echarts.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script language="JavaScript">
    /*var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'echarts',
            echarts: 'china'
        }]
    });*/

    var chart = echarts.init(document.getElementById('main'));

    var res = [];
    res.push({name: '常州', value: [119.943204, 31.791627]})

    $.get('/map/datas.json', function (chinaJson) {
        echarts.registerMap('china', chinaJson);
        //var chart = echarts.init(document.getElementById('main'));
        chart.setOption({
            series: [{
                type: 'map',
                roam: true,
                map: 'china'
            }]
        });
    });


    var mapNamePrex = '';

    function mapLoad(mapName) {
        $.get('/map/'+mapNamePrex + mapName + '/datas.json', function (mapJson) {
            mapNamePrex += mapName + '/';
            alert(mapNamePrex);
            chart.dispose();
            echarts.registerMap(mapName, mapJson);
            chart = echarts.init(document.getElementById('main'));
            chart.setOption({
                geo: [{
                    type: 'map',
                    map: mapName,
                    roam: true
                }],
                series: [{ // 散点分布
                    roam: true,
                    type: "scatter",
                    coordinateSystem: "geo",
                    data: res
                }]
            });

            chart.on('click', function (area) {
                alert(area.name);
                mapLoad(area.name);
            });
        });
    }


    this.chart.on('click', function (province) {
        alert(province.name);
        mapLoad(province.name);
    });
</script>
</body>
</html>